<template>
    <div class="app-container" >
     <el-row     :gutter="20"  style="padding: 0px 19px"  class="parent">
 <el-col :span="3.5" v-for="(config) in data"   :key=" config.id"  class="child" style="margin:0 0 18px 0;text-align:center;" >
   <!-- <div class="tip">No.{{++index}}</div> -->
   <el-card  body-style=" text-align:center;" shadow="never" 
   style="border-style:double;border-width:5px;width:150px;height:190px;border-color:#6d6565b8;text-wrap:wrap;margin:auto;"  >
<h3 style="    padding-bottom: 10px;"> {{config.deviceName}}</h3>
<h3 style="    padding-bottom: 6px;"> {{config.value}}</h3>
<h3> {{config.unit}}</h3>
     
   </el-card>
 </el-col >
     </el-row>
     <el-row :gutter="12">
        <el-col :span="20" style="text-align:center;">

            <!-- <el-button-group>
  <el-button type="primary" icon="el-icon-arrow-left" style="margin-right:50px;" disabled>上一页</el-button>
  <el-button type="primary" >下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group> -->
        </el-col>
     </el-row>
    </div>
</template>
<script>
  import { simulationDiagramData } from "@/api/system/chartConfig";

export default {
 name: "monitor",
 created() {
     console.log(this.$route.query.currentId)
     this.charConfig();
 },
 methods:{
   charConfig() {
     this.loading = true;
    //  console.log(this.queryParams)
     simulationDiagramData(this.queryParams).then((response) => {
       this.data = response.data.data;
       this.loading = false;
     });
   }
 
 
 },
 data(){
   return{
    data: [],
           currentId: this.$route.query.currentId,
           name:this.$route.query.name,
    // configList: [],
       loading :false,
        // 查询参数
        queryParams: {
           pageNum: 1,
           pageSize: 10000,
           deviceGraphicalId: this.$route.query.currentId//1趋势图 2柱状图 3仪表图
        }
 }
}
}
</script>
<style scoped>


.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.child{
  flex-basis: 20%;
}


</style>
